<template>
  <div class="box" :style="imgStyle1">
    <router-view></router-view>
    <!-- 侧边导航 -->
    <aside class="left" style="width: 17%">
      <form-col>
        <!-- 学科多选框 -->
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in subjectIds"
            :key="item.subjectId"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
        <!-- 展示所选学科的阶段-->
        <ul class="stages">
          <li
            v-for="(stageId, index) in stages"
            :key="stageId.stageId"
            @click="stagesStyle(index, stageId.name)"
            :class="{ active: i == index }"
          >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhuangtai1"></use>
            </svg>
            {{ stageId.name }}
          </li>
        </ul>
      </form-col>
    </aside>
    <!--右边展示区以及头部功能区 -->
    <div class="contentLeft">
      <!-- 头部导航 -->
      <div class="nav" v-show="showNav">
        <nav-tabs v-model="activeName" @tab-click="handleClick">
          <nav-tab-pane label="所有关卡" name="first">
            <div class="contentLeft-contents">
              <table>
                <thead style="padding-left: 10px">
                  <tr>
                    <th>
                      <input type="checkbox" id="checkbox" />
                    </th>
                    <th>ID</th>
                    <th>任务名称</th>
                    <th>状态</th>
                    <th>截止</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="project in projects"
                    :key="project.id"
                    :class="
                      project.status == 3
                        ? 'actived'
                        : project.status == -1
                        ? 'achive'
                        : ''
                    "
                  >
                    <td><input type="checkbox" id="checkbox" /></td>
                    <td style="width: 50px">
                      {{ project.id }}
                    </td>
                    <td @click.stop="Lookformations(project)">
                      {{ project.customspassName }}
                    </td>
                    <td
                      :style="{
                        color:
                          project.status == 3 || project.status == 5
                            ? 'green'
                            : project.status == 2 || project.status == 4
                            ? 'red'
                            : project.status == 1 || project.status == -1
                            ? 'grey'
                            : '',
                      }"
                      v-text="
                        project.status == 3
                          ? '进行中'
                          : project.status == 1
                          ? '未开始'
                          : project.status == 0
                          ? '已完成'
                          : project.status == 2
                          ? '逾期'
                          : project.status == -1
                          ? '关闭'
                          : project.status == 4
                          ? '等待验收'
                          : project.status == 5
                          ? '正在验收'
                          : ''
                      "
                    ></td>
                    <td>{{ project.end }}</td>
                    <td>
                      <button
                        title="开始"
                        class="btn"
                        :style="project.status == '1' ? btnborder : ''"
                        :disabled="project.status == '1' ? false : true"
                        @click.stop="show(project.customspassName, project.id)"
                      >
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-bofang2"></use>
                        </svg>
                      </button>
                      <button
                        title="关闭"
                        class="btn"
                        @click="close(project)"
                        :style="project.status == '0' ? btnborder : ''"
                        :disabled="project.status == '0' ? false : true"
                      >
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-guanbi1"></use>
                        </svg>
                      </button>
                      <button
                        title="验收"
                        class="btn"
                        :style="
                          project.status == '3' ||
                          project.status == '2' ||
                          project.status == '4'
                            ? btnborder
                            : ''
                        "
                        :disabled="
                          project.status == '3' ||
                          project.status == '2' ||
                          project.status == '4'
                            ? false
                            : true
                        "
                        @click="checkOut1(project.customspassName)"
                      >
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-wanchengdise"></use>
                        </svg>
                      </button>
                      <button
                        title="延期"
                        class="btn"
                        :style="
                          project.status == '3' ||
                          project.status == '2' ||
                          project.status == '4'
                            ? btnborder
                            : ''
                        "
                        :disabled="
                          project.status == '3' ||
                          project.status == '2' ||
                          project.status == '4'
                            ? false
                            : true
                        "
                        @click="checkOut2(project.customspassName)"
                      >
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-rizhi"></use>
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </nav-tab-pane>
        </nav-tabs>
        <div class="SubjectBtn">
          <ul>
            <li v-if="projectResource.indexOf('001001') > -1">
              <router-link
                :to="{ name: 'Permission', query: { Subject: true } }"
                >学科管理</router-link
              >
            </li>
            <li v-if="projectResource.indexOf('001002') > -1">
              <router-link :to="{ name: 'Permission', query: { Stage: true } }"
                >阶段管理</router-link
              >
            </li>
            <li v-if="projectResource.indexOf('001003') > -1">
              <router-link
                :to="{ name: 'Permission', query: { customspass: true } }"
                >关卡管理</router-link
              >
            </li>
            <li v-if="projectResource.indexOf('003001') > -1">
              <router-link
                :to="{ name: 'Permission', query: { CheckProcess: true } }"
                >验收管理</router-link
              >
            </li>
            <li v-if="projectResource.indexOf('003002') > -1">
              <router-link
                :to="{ name: 'Permission', query: { DelayProcess: true } }"
                >延期管理</router-link
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 弹框（开启关卡） -->
    <el-dialog :visible.sync="dialogVisible" width="60%">
      <span> {{ projectName }}</span>
      <span v-if="startshow" class="startMsg">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-weiwancheng-"></use>
        </svg>
        当前您正在进行一个关卡的学习</span
      >
      <div class="contexts">
        <f-form ref="form" :model="form" label-width="80px">
          <form-item label="关卡ID">
            <form-input v-model="form.id" style="width: 46%"></form-input>
          </form-item>
          <form-item label="开始时间">
            <form-col :span="11">
              <form-picker
                type="datetime"
                placeholder="开始时间"
                v-model="form.start"
                value-format="yyyy-MM-dd HH:mm"
                style="width: 100%"
              ></form-picker>
            </form-col>
          </form-item>
          <form-item label="结束时间">
            <form-col :span="11">
              <form-picker
                type="datetime"
                placeholder="结束时间"
                v-model="form.end"
                value-format="yyyy-MM-dd HH:mm"
                style="width: 100%"
              ></form-picker>
            </form-col>
          </form-item>
        </f-form>
        <div>备注</div>
        <textarea
          name=""
          id="textarea"
          cols="70"
          rows="8"
          placeholder="可以直接在编辑器中贴图"
        ></textarea>
        <button class="startbtn" @click="startbtn()" :disabled="startshow">
          开启关卡
        </button>
      </div>
    </el-dialog>
    <!-- 消息提示 -->
    <template>
      <msg-button :plain="true" @click="sucess"></msg-button>
    </template>
    <!-- 弹窗（申请框） -->
    <div class="delayBackground" v-show="visible">
      <Application
        :visible.sync="visible"
        :customspassName="customspassName"
        :isShow="isShow"
        :notShow="notShow"
      ></Application>
    </div>
  </div>
</template>
<script>
import "@/assets/css/Subeject.css";
import { mapState } from "vuex";
import Application from "./Application.vue";
import qs from "qs";
export default {
  name: "Subject",
  components: { Application },
  data() {
    return {
      imgStyle1: {
        backgroundImage: `url(${require("@/assets/images/bgc.png")})`,
      },
      btnborder: {
        border: "2px solid rgb(0, 100, 255)",
      },
      subjectIds: [],
      styleObj: {
        width: "",
      },
      activeName: "first",
      //权限管理
      projectResource: [],
      resourceId: [],
      //学科选择框参数
      value: "",
      direatName: [],
      //查看学科进度
      showNav: true,
      stages: [],
      projects: [],
      i: null,
      //开启和关闭关卡的
      dialogVisible: false,
      startshow: false,
      projectName: "",
      form: {
        start: "",
        end: "",
        id: "",
      },
      //搜索按钮
      searchValue: "",
      //关卡验收
      checkformation: "",
      checkouttime: "",
      teacher: "",
      showstatus: false,
      manager: [],
      visible: false,
      customspassName: "",
      isShow: null,
      notShow: null,
      // 当前正在学习的阶段
      staging: "",
      //从首页跳过来的阶段
      FirststageName: this.$route.query.stategname,
    };
  },
  inject: ["reload"],
  computed: {
    ...mapState("LoginData", ["userformation"]),
    // 关卡验收
    evenProjects: function () {
      return this.projects.filter(function (project) {
        return (
          project.status === "3" ||
          project.status === "4" ||
          project.status === "5" ||
          project.status === "2"
        );
      });
    },
  },
  methods: {
    //点击改变表单的样式
    Longsearch() {
      this.styleObj.width = "200px";
    },
    Shortsearch() {
      this.styleObj.width = "100px";
    },
    handleClick(tab, event) {
      if (tab.index == 0) {
        this.reload();
      }
      if (tab.index == 1) {
        //查询所有管理员的信息
        this.$http({
          url: "manager/selectAllManager",
          method: "get",
        }).then(({ data }) => {
          if (data.flag) {
            this.manager = response.data.data;
          } else {
            console.log(error.data);
          }
        });
      }
    },
    /* 鼠标点击阶段显示背景颜色以及显示阶段显示对应的关卡 */
    stagesStyle(index, name) {
      this.i = index;
      let username = this.$store.state.LoginData.userformation[0].username;
      let url = `customspass/selectStudyCustomspassByUsernameAndStageName?username=${username}&stageName=${encodeURIComponent(
        name
      )}`;
      this.btnStage(url);
    },
    //关卡优先级排序 status -1 未完成 0 进行中 1 已完成 2 逾期
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    },
    projectSort() {
      this.projects.sort(this.compare("status"));
    },
    /* 查看当前关卡的信息 */
    Lookformations(project) {
      let obj1 = {
        username: this.userformation[0].username,
        subjectName: this.value,
      };
      let urls = "user/selectStudyCustomspassInfo";
      this.ArryDatas(obj1, urls, project);
    },
    /* 开启关卡 */
    show(name, id) {
      //显示弹框
      this.dialogVisible = true;
      //展示该关卡的名字
      this.projectName = name;
      //关卡的id
      this.form.id = id;
    },
    startbtn() {
      let obj = {};
      for (var k in this.form) {
        obj[k] = this.form[k];
      }
      obj.id = this.form.id;
      console.log(obj);
      let url = "customspass/startCustomspassStudy";
      this.startProject(url, obj);
    },
    /* 关闭关卡 */
    close(project) {
      this.closebtn(project.id);
    },
    //点击获取验收关卡的信息
    getproject(projects) {
      this.checkformation = projects;
    },
    //发起验收与延期
    checkOut1(name) {
      this.isShow = true;
      this.notShow = false;
      this.visible = true;
      // console.log(name);
      this.customspassName = name;
    },
    checkOut2(name) {
      this.isShow = false;
      this.notShow = true;
      this.visible = true;
      this.customspassName = name;
    },
    /* 显示所有学科以及阶段 */
    SubjetDate() {
      this.$http({
        url: "subject/selectAllSubject",
        method: "get",
      }).then(({ data }) => {
        this.subjectIds = data.data;
        data.data.forEach((item, index) => {
          this.direatName.push(item.name);
          if (this.value == item.name) {
            this.stages = item.stageList;
          }
        });
        this.stages.forEach((ele, index) => {
          if (ele.name === this.staging) {
            this.i = index;
          }
        });
        if (this.$route.query.stategname) {
          this.stagesStyle(
            this.$route.query.stategnameindex,
            this.$route.query.stategname
          );
        }
      });
    },
  },
  //监视学科选择框里面的参数变换展示所有的关卡信息
  watch: {
    value: {
      immediate: true,
      handler(newValue, oldValue) {
        //显示阶段
        this.subjectIds.forEach((item, index) => {
          this.direatName.push(item.name);
          if (this.value == item.name) {
            this.stages = item.stageList;
          }
        });
      },
    },
  },
  mounted() {
    let username = this.$store.state.LoginData.userformation[0].username;
    let id = this.$store.state.LoginData.userformation[0].id;
    let project = this.$store.state.LoginData.userformation[1];
    let data = JSON.parse(localStorage.getItem("datas"));
    this.value = data[1];
    /* 用户权限 */
    this.LookResrouceB(id);
    /* 显示所有学科以及阶段 */
    this.SubjetDate();
    /* 查询关卡 */
    this.$http({
      url: "customspass/selectStudyCustomspassByUsernameAndSubjectName",
      method: "post",
      data: qs.stringify({
        username: username,
        subjectName: project,
      }),
    }).then(({ data }) => {
      if (data.flag) {
        let subject = data.data;
        subject.forEach((item, index) => {
          this.projects.push(item);
          if (
            item.status == "3" ||
            item.status == "4" ||
            item.status == "5" ||
            item.status == "2"
          ) {
            this.startshow = true;
            this.staging = item.stageName;
            this.itemName = item;
          }
        });
        this.projectSort();
      } else {
        console.log(data);
      }
    });
  },
};
</script>

<style lang="less" scoped>
//深度样式 前提是less的模式
.left /deep/ .el-select {
  width: 101%;
  margin: 20px 0 10px 0;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.el-select-dropdown__item {
  padding: 0 20px;
}
.el-select-dropdown__item:hover {
  background-color: skyblue;
}
// .box {
//   /deep/ .el-dialog__body .contexts .el-input__inner {
//     width: 72%;
//   }
// }
.contentLeft /deep/ .el-tabs__item.is-active {
  color: #000;
}
.contentLeft /deep/ .el-tabs__active-bar {
  background-color: rgba(255, 255, 255, 0.5);
}

.selectsubject option {
  background-color: pink;
}
.el-col-12 {
  width: 230px;
}
.icon-shengdanwawa:before {
  font-size: 20px;
  color: rgb(23, 143, 202);
  margin-right: 10px;
  vertical-align: middle;
}
.icon-search:before {
  position: absolute;
  top: 1px;
  right: 207px;
  z-index: 1;
  font-size: 16px;
}
.el-tab-pane {
  height: 100%;
  width: 100%;
  background-color: #eee;
}

.active {
  background-color: rgb(12, 248, 177);
}
.actived {
  background-color: rgb(255, 244, 222);
}
.achive {
  background-color: rgb(198, 236, 198);
}
//所有学科的学生展示
table {
  border-collapse: collapse;
  width: 100%;
  cursor: pointer;
  flex: 1;
}
table tr {
  border-bottom: solid 1px #ccc;
}
.contentLeft-contents table tbody td,
th {
  text-align: left;
  padding: 0 10px 0 20px;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.3em;
  fill: currentColor;
  overflow: hidden;
  font-size: 23px;
}
.btn {
  margin-right: 5px;
  border: none;
  border: 2px solid #ccc;
  background-color: transparent;
  cursor: pointer;
}
.startMsg {
  margin-left: 50px;
  color: red;
}
</style>